<template>
  <div class="todos-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h1 class="page-title">待办事项</h1>
        <p class="page-subtitle">管理你的任务和计划</p>
      </div>
      
      <div class="header-right">
        <n-button 
          type="primary" 
          @click="showAddListModal = true"
        >
          <template #icon>
            <n-icon><Plus /></n-icon>
          </template>
          新建列表
        </n-button>
      </div>
    </div>
    
    <!-- 主要内容区域 -->
    <div class="todos-main">
      <!-- 左侧：列表导航 -->
      <div class="lists-sidebar">
        <!-- 默认列表 -->
        <div class="default-lists">
          <div 
            class="list-item"
            :class="{ active: currentListId === 'all' }"
            @click="setCurrentList('all')"
          >
            <div class="list-info">
              <n-icon class="list-icon" color="#3b82f6">
                <List />
              </n-icon>
              <span class="list-name">所有任务</span>
            </div>
            <span class="task-count">{{ allTodos.length }}</span>
          </div>
          
          <div 
            class="list-item"
            :class="{ active: currentListId === 'today' }"
            @click="setCurrentList('today')"
          >
            <div class="list-info">
              <n-icon class="list-icon" color="#10b981">
                <CalendarEvent />
              </n-icon>
              <span class="list-name">今日任务</span>
            </div>
            <span class="task-count">{{ todayTodos.length }}</span>
          </div>
          
          <div 
            class="list-item"
            :class="{ active: currentListId === 'important' }"
            @click="setCurrentList('important')"
          >
            <div class="list-info">
              <n-icon class="list-icon" color="#f59e0b">
                <Star />
              </n-icon>
              <span class="list-name">重要任务</span>
            </div>
            <span class="task-count">{{ importantTodos.length }}</span>
          </div>
          
          <div 
            class="list-item"
            :class="{ active: currentListId === 'completed' }"
            @click="setCurrentList('completed')"
          >
            <div class="list-info">
              <n-icon class="list-icon" color="#6b7280">
                <Check />
              </n-icon>
              <span class="list-name">已完成</span>
            </div>
            <span class="task-count">{{ completedTodos.length }}</span>
          </div>
        </div>
        
        <!-- 分隔线 -->
        <n-divider style="margin: 16px 0" />
        
        <!-- 自定义列表 -->
        <div class="custom-lists">
          <div class="section-header">
            <span class="section-title">我的列表</span>
          </div>
          
          <div 
            v-for="list in todoLists" 
            :key="list.id"
            class="list-item"
            :class="{ active: currentListId === list.id }"
            @click="setCurrentList(list.id)"
          >
            <div class="list-info">
              <n-icon class="list-icon" color="#8b5cf6">
                <Folder />
              </n-icon>
              <span class="list-name">{{ list.name }}</span>
            </div>
            
            <div class="list-actions">
              <span class="task-count">{{ getListTodoCount(list.id) }}</span>
              
              <n-dropdown 
                :options="getListMenuOptions()"
                @select="(key) => handleListAction(key, list)"
              >
                <n-button quaternary circle size="small">
                  <template #icon>
                    <n-icon><DotsVertical /></n-icon>
                  </template>
                </n-button>
              </n-dropdown>
            </div>
          </div>
          
          <!-- 空状态 -->
          <div v-if="todoLists.length === 0" class="empty-lists">
            <p>暂无自定义列表</p>
            <n-button text @click="showAddListModal = true">
              创建第一个列表
            </n-button>
          </div>
        </div>
      </div>
      
      <!-- 右侧：任务内容 -->
      <div class="todos-content">
        <!-- 内容头部 -->
        <div class="content-header">
          <div class="header-info">
            <h2 class="content-title">{{ currentListTitle }}</h2>
            <p class="content-subtitle">{{ currentListSubtitle }}</p>
          </div>
          
          <div class="header-actions">
            <n-button-group v-if="currentListType === 'custom'">
              <n-button 
                @click="showEditListModal = true"
              >
                <template #icon>
                  <n-icon><Edit /></n-icon>
                </template>
                编辑列表
              </n-button>
              
              <n-button 
                type="error"
                @click="handleDeleteCurrentList"
              >
                <template #icon>
                  <n-icon><Trash /></n-icon>
                </template>
                删除列表
              </n-button>
            </n-button-group>
          </div>
        </div>
        
        <!-- 快速添加任务 -->
        <div class="quick-add">
          <div class="add-task-input">
            <n-input
              v-model:value="newTaskTitle"
              placeholder="添加任务..."
              @keyup.enter="handleAddTask"
            >
              <template #prefix>
                <n-icon><Plus /></n-icon>
              </template>
            </n-input>
            
            <n-button 
              type="primary"
              :disabled="!newTaskTitle.trim()"
              @click="handleAddTask"
            >
              添加
            </n-button>
          </div>
        </div>
        
        <!-- 任务列表 -->
        <div class="tasks-container">
          <!-- 加载状态 -->
          <div v-if="todosStore.isLoading" class="loading-state">
            <n-spin size="large" />
          </div>
          
          <!-- 任务列表 -->
          <div v-else-if="currentTodos.length > 0" class="tasks-list">
            <div 
              v-for="todo in currentTodos" 
              :key="todo.id"
              class="task-item"
              :class="{ completed: todo.completed }"
            >
              <!-- 任务复选框 -->
              <div class="task-checkbox">
                <n-checkbox 
                  :checked="todo.completed"
                  @update:checked="(checked) => handleToggleTask(todo.id, checked)"
                />
              </div>
              
              <!-- 任务内容 -->
              <div class="task-content" @click="selectTask(todo)">
                <div class="task-title" :class="{ completed: todo.completed }">
                  {{ todo.title }}
                </div>
                
                <div class="task-meta">
                  <span v-if="todo.dueDate" class="task-due-date">
                    <n-icon><Clock /></n-icon>
                    {{ formatDate(todo.dueDate, 'MM-DD HH:mm') }}
                  </span>
                  
                  <span v-if="todo.priority > 0" class="task-priority">
                    <n-icon size="12" :color="getPriorityColor(todo.priority)">
                      <Star />
                    </n-icon>
                    {{ getPriorityText(todo.priority) }}
                  </span>
                </div>
              </div>
              
              <!-- 任务操作 -->
              <div class="task-actions">
                <n-dropdown 
                  :options="getTaskMenuOptions()"
                  @select="(key) => handleTaskAction(key, todo)"
                >
                  <n-button quaternary circle size="small">
                    <template #icon>
                      <n-icon><DotsVertical /></n-icon>
                    </template>
                  </n-button>
                </n-dropdown>
              </div>
            </div>
          </div>
          
          <!-- 空状态 -->
          <div v-else class="empty-tasks">
            <div class="empty-content">
              <n-icon size="64" color="#d1d5db">
                <CircleCheck />
              </n-icon>
              <h3>{{ getEmptyStateTitle() }}</h3>
              <p>{{ getEmptyStateDescription() }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 添加列表模态框 -->
    <n-modal 
      v-model:show="showAddListModal" 
      preset="card" 
      title="新建列表" 
      style="width: 400px"
    >
      <n-form
        ref="addListFormRef"
        :model="addListForm"
        :rules="listRules"
        label-placement="top"
      >
        <n-form-item path="name" label="列表名称">
          <n-input 
            v-model:value="addListForm.name" 
            placeholder="请输入列表名称"
            @keyup.enter="handleAddList"
          />
        </n-form-item>
      </n-form>
      
      <template #footer>
        <div class="modal-footer">
          <n-button @click="showAddListModal = false">取消</n-button>
          <n-button 
            type="primary" 
            :loading="todosStore.isLoading"
            @click="handleAddList"
          >
            创建
          </n-button>
        </div>
      </template>
    </n-modal>
    
    <!-- 编辑列表模态框 -->
    <n-modal 
      v-model:show="showEditListModal" 
      preset="card" 
      title="编辑列表" 
      style="width: 400px"
    >
      <n-form
        ref="editListFormRef"
        :model="editListForm"
        :rules="listRules"
        label-placement="top"
      >
        <n-form-item path="name" label="列表名称">
          <n-input 
            v-model:value="editListForm.name" 
            placeholder="请输入列表名称"
            @keyup.enter="handleUpdateList"
          />
        </n-form-item>
      </n-form>
      
      <template #footer>
        <div class="modal-footer">
          <n-button @click="showEditListModal = false">取消</n-button>
          <n-button 
            type="primary" 
            :loading="todosStore.isLoading"
            @click="handleUpdateList"
          >
            保存
          </n-button>
        </div>
      </template>
    </n-modal>
    
    <!-- 任务详情抽屉 -->
    <n-drawer 
      v-model:show="showTaskDrawer" 
      :width="400"
      placement="right"
    >
      <n-drawer-content title="任务详情">
        <div v-if="selectedTask" class="task-detail">
          <!-- 任务标题 -->
          <div class="detail-section">
            <label class="detail-label">任务标题</label>
            <n-input 
              v-model:value="taskForm.title"
              placeholder="请输入任务标题"
            />
          </div>
          
          <!-- 截止时间 -->
          <div class="detail-section">
            <label class="detail-label">截止时间</label>
            <n-date-picker 
              v-model:value="taskForm.dueDate"
              type="datetime"
              placeholder="选择截止时间"
              clearable
              style="width: 100%"
            />
          </div>
          
          <!-- 优先级 -->
          <div class="detail-section">
            <label class="detail-label">优先级</label>
            <n-select
              v-model:value="taskForm.priority"
              :options="priorityOptions"
              placeholder="选择优先级"
            />
          </div>
          
          <!-- 所属列表 -->
          <div class="detail-section">
            <label class="detail-label">所属列表</label>
            <n-select
              v-model:value="taskForm.listId"
              :options="listSelectOptions"
              placeholder="选择列表"
            />
          </div>
          
          <!-- 备注功能暂时移除 -->
        </div>
        
        <template #footer>
          <div class="drawer-footer">
            <n-button @click="showTaskDrawer = false">取消</n-button>
            <n-button 
              type="primary" 
              :loading="todosStore.isLoading"
              @click="handleUpdateTask"
            >
              保存
            </n-button>
          </div>
        </template>
      </n-drawer-content>
    </n-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch, h } from 'vue'
import {
  NButton,
  NButtonGroup,
  NIcon,
  NInput,
  NCheckbox,
  NDropdown,
  NDivider,
  NSpin,
  NModal,
  NDrawer,
  NDrawerContent,
  NForm,
  NFormItem,
  NSelect,
  NDatePicker,
  useMessage,
  useDialog,
  type FormInst,
  type FormRules
} from 'naive-ui'
import {
  Plus,
  List,
  CalendarEvent,
  Star,
  Check,
  CircleCheck,
  Folder,
  DotsVertical,
  Edit,
  Trash,
  Clock
} from '@vicons/tabler'
import { useTodosStore } from '@/stores/todos'
import { useCalendarStore } from '@/stores/calendar'
import { 
  formatDate, 
  getPriorityText, 
  getPriorityColor 
} from '@/utils'
import type { Todo, TodoList, CreateTodoRequest, UpdateTodoRequest } from '@/types/todo'

const message = useMessage()
const dialog = useDialog()
const todosStore = useTodosStore()
const calendarStore = useCalendarStore()

// 表单引用
const addListFormRef = ref<FormInst | null>(null)
const editListFormRef = ref<FormInst | null>(null)

// 当前选中的列表
const currentListId = ref<string | number>('all')

// 模态框状态
const showAddListModal = ref(false)
const showEditListModal = ref(false)
const showTaskDrawer = ref(false)

// 表单数据
const newTaskTitle = ref('')
const addListForm = ref({ name: '' })
const editListForm = ref({ name: '' })
const selectedTask = ref<Todo | null>(null)
const taskForm = ref({
  title: '',
  dueDate: null as number | null,
  priority: 0,
  listId: null as number | null
})

// 计算属性
const todoLists = computed(() => todosStore.todoLists)
const allTodos = computed(() => todosStore.todos)
const todayTodos = computed(() => todosStore.todayTodos)
const importantTodos = computed(() => todosStore.todos.filter((t: Todo) => t.priority >= 2))
const completedTodos = computed(() => todosStore.completedTodos)

// 当前列表信息
const currentListType = computed(() => {
  if (typeof currentListId.value === 'string') {
    return 'default'
  }
  return 'custom'
})

const currentListTitle = computed(() => {
  if (currentListId.value === 'all') return '所有任务'
  if (currentListId.value === 'today') return '今日任务'
  if (currentListId.value === 'important') return '重要任务'
  if (currentListId.value === 'completed') return '已完成'
  
  const list = todoLists.value.find((l: TodoList) => l.id === currentListId.value)
  return list?.name || '未知列表'
})

const currentListSubtitle = computed(() => {
  const count = currentTodos.value.length
  if (currentListId.value === 'completed') {
    return `${count} 个已完成任务`
  }
  return `${count} 个任务`
})

const currentTodos = computed(() => {
  if (currentListId.value === 'all') return allTodos.value
  if (currentListId.value === 'today') return todayTodos.value
  if (currentListId.value === 'important') return importantTodos.value
  if (currentListId.value === 'completed') return completedTodos.value
  
  return todosStore.todos.filter((t: Todo) => t.listId === currentListId.value)
})

// 选项数据
const priorityOptions = [
  { label: '无', value: 0 },
  { label: '低', value: 1 },
  { label: '中', value: 2 },
  { label: '高', value: 3 }
]

const listSelectOptions = computed(() => [
  ...todoLists.value.map((list: TodoList) => ({
    label: list.name,
    value: list.id
  }))
])

// 表单验证规则
const listRules: FormRules = {
  name: [
    {
      required: true,
      message: '请输入列表名称',
      trigger: ['input', 'blur']
    }
  ]
}

// 获取列表任务数量
const getListTodoCount = (listId: number) => {
  return todosStore.todos.filter((t: Todo) => t.listId === listId && !t.completed).length
}

// 获取列表菜单选项
const getListMenuOptions = () => [
  {
    label: '编辑',
    key: 'edit',
    icon: () => h(NIcon, null, { default: () => h(Edit) })
  },
  {
    label: '删除',
    key: 'delete',
    icon: () => h(NIcon, null, { default: () => h(Trash) })
  }
]

// 获取任务菜单选项
const getTaskMenuOptions = () => [
  {
    label: '编辑',
    key: 'edit',
    icon: () => h(NIcon, null, { default: () => h(Edit) })
  },
  {
    label: '删除',
    key: 'delete',
    icon: () => h(NIcon, null, { default: () => h(Trash) })
  }
]

// 获取空状态信息
const getEmptyStateTitle = () => {
  if (currentListId.value === 'today') return '今日无任务'
  if (currentListId.value === 'important') return '暂无重要任务'
  if (currentListId.value === 'completed') return '暂无已完成任务'
  return '暂无任务'
}

const getEmptyStateDescription = () => {
  if (currentListId.value === 'today') return '今天没有安排任务，享受轻松的一天吧！'
  if (currentListId.value === 'important') return '没有标记为重要的任务'
  if (currentListId.value === 'completed') return '还没有完成任何任务'
  return '开始添加你的第一个任务吧！'
}

// 设置当前列表
const setCurrentList = (listId: string | number) => {
  currentListId.value = listId
  
  // 如果是自定义列表，设置当前列表ID
  if (typeof listId === 'number') {
    todosStore.setCurrentList(listId)
  }
}

// 选择任务
const selectTask = (todo: Todo) => {
  selectedTask.value = todo
  taskForm.value = {
    title: todo.title,
    dueDate: todo.dueDate ? new Date(todo.dueDate).getTime() : null,
    priority: todo.priority,
    listId: todo.listId,
    // notes: todo.notes || '' // notes字段已从Todo类型中移除
  }
  showTaskDrawer.value = true
}

// 添加任务
const handleAddTask = async () => {
  if (!newTaskTitle.value.trim()) return
  
  try {
    let listId: number | null = null
    
    // 确定任务所属列表
    if (typeof currentListId.value === 'number') {
      listId = currentListId.value
    } else if (todoLists.value.length > 0) {
      listId = todoLists.value[0].id
    }
    
    if (!listId) {
      message.error('请先创建一个列表')
      return
    }
    
    const todoData: CreateTodoRequest = {
      title: newTaskTitle.value.trim(),
      listId: listId
    }
    
    await todosStore.createTodo(todoData)
    
    newTaskTitle.value = ''
    message.success('任务添加成功')
    
    // 记录活动
    await calendarStore.recordActivity({ date: new Date().toISOString().split('T')[0], count: 1 })
  } catch (error) {
    message.error('添加任务失败')
  }
}

// 切换任务状态
const handleToggleTask = async (todoId: number, completed: boolean) => {
  try {
    await todosStore.toggleTodo(todoId)
    
    if (completed) {
      message.success('任务已完成')
      // 记录活动
      await calendarStore.recordActivity({ date: new Date().toISOString().split('T')[0], count: 1 })
    }
  } catch (error) {
    message.error('更新任务状态失败')
  }
}

// 更新任务
const handleUpdateTask = async () => {
  if (!selectedTask.value) return
  
  try {
    const updateData: UpdateTodoRequest = {
      title: taskForm.value.title,
      dueDate: taskForm.value.dueDate ? new Date(taskForm.value.dueDate) : undefined,
      priority: taskForm.value.priority,
      listId: taskForm.value.listId || undefined,
      // notes: taskForm.value.notes || undefined // notes字段已从Todo类型中移除
    }
    
    await todosStore.updateTodo(selectedTask.value.id, updateData)
    
    showTaskDrawer.value = false
    message.success('任务更新成功')
  } catch (error) {
    message.error('更新任务失败')
  }
}

// 任务操作
const handleTaskAction = (key: string, todo: Todo) => {
  if (key === 'edit') {
    selectTask(todo)
  } else if (key === 'delete') {
    dialog.warning({
      title: '确认删除',
      content: `确定要删除任务「${todo.title}」吗？`,
      positiveText: '删除',
      negativeText: '取消',
      onPositiveClick: async () => {
        try {
          await todosStore.deleteTodo(todo.id)
          message.success('任务删除成功')
        } catch (error) {
          message.error('删除任务失败')
        }
      }
    })
  }
}

// 添加列表
const handleAddList = async () => {
  if (!addListFormRef.value) return
  
  try {
    await addListFormRef.value.validate()
    
    await todosStore.createTodoList(addListForm.value.name)
    
    showAddListModal.value = false
    addListForm.value.name = ''
    message.success('列表创建成功')
  } catch (error) {
    console.error('Create list failed:', error)
  }
}

// 更新列表
const handleUpdateList = async () => {
  if (!editListFormRef.value) return
  
  const currentList = todoLists.value.find((l: TodoList) => l.id === currentListId.value)
  if (!currentList) return
  
  try {
    await editListFormRef.value.validate()
    
    await todosStore.updateTodoList(currentList.id, editListForm.value.name)
    
    showEditListModal.value = false
    message.success('列表更新成功')
  } catch (error) {
    console.error('Update list failed:', error)
  }
}

// 列表操作
const handleListAction = (key: string, list: any) => {
  if (key === 'edit') {
    editListForm.value.name = list.name
    setCurrentList(list.id)
    showEditListModal.value = true
  } else if (key === 'delete') {
    dialog.warning({
      title: '确认删除',
      content: `确定要删除列表「${list.name}」吗？列表中的所有任务也将被删除。`,
      positiveText: '删除',
      negativeText: '取消',
      onPositiveClick: async () => {
        try {
          await todosStore.deleteTodoList(list.id)
          
          // 如果删除的是当前列表，切换到默认列表
          if (currentListId.value === list.id) {
            setCurrentList('all')
          }
          
          message.success('列表删除成功')
        } catch (error) {
          message.error('删除列表失败')
        }
      }
    })
  }
}

// 删除当前列表
const handleDeleteCurrentList = () => {
  const currentList = todoLists.value.find((l: TodoList) => l.id === currentListId.value)
  if (currentList) {
    handleListAction('delete', currentList)
  }
}

// 监听当前列表变化
watch(currentListId, () => {
  if (typeof currentListId.value === 'number') {
    editListForm.value.name = todoLists.value.find((l: TodoList) => l.id === currentListId.value)?.name || ''
  }
})

// 初始化数据
const initData = async () => {
  try {
    await todosStore.fetchTodoLists()
    await todosStore.fetchTodos()
  } catch (error) {
    console.error('Failed to load todos data:', error)
  }
}

// 组件挂载
onMounted(() => {
  initData()
})
</script>

<style scoped>
.todos-page {
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
  height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 4px 0;
}

.page-subtitle {
  color: #6b7280;
  margin: 0;
}

.todos-main {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  flex: 1;
  overflow: hidden;
}

.lists-sidebar {
  background: #f9fafb;
  border-radius: 12px;
  padding: 16px;
  overflow-y: auto;
}

.default-lists,
.custom-lists {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.section-header {
  padding: 8px 12px;
  margin-bottom: 8px;
}

.section-title {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.list-item:hover {
  background: #e5e7eb;
}

.list-item.active {
  background: #3b82f6;
  color: white;
}

.list-item.active .list-icon,
.list-item.active .task-count {
  color: white !important;
}

.list-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.list-icon {
  flex-shrink: 0;
}

.list-name {
  font-weight: 500;
}

.list-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.task-count {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}

.empty-lists {
  text-align: center;
  padding: 24px 12px;
  color: #6b7280;
}

.todos-content {
  background: white;
  border-radius: 12px;
  padding: 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.content-title {
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 4px 0;
}

.content-subtitle {
  color: #6b7280;
  margin: 0;
}

.quick-add {
  margin-bottom: 24px;
}

.add-task-input {
  display: flex;
  gap: 12px;
}

.add-task-input .n-input {
  flex: 1;
}

.tasks-container {
  flex: 1;
  overflow-y: auto;
}

.loading-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.tasks-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.task-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: all 0.2s;
}

.task-item:hover {
  border-color: #d1d5db;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.task-item.completed {
  opacity: 0.6;
}

.task-checkbox {
  flex-shrink: 0;
}

.task-content {
  flex: 1;
  cursor: pointer;
}

.task-title {
  font-weight: 500;
  color: #1f2937;
  margin-bottom: 4px;
}

.task-title.completed {
  text-decoration: line-through;
  color: #6b7280;
}

.task-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: #6b7280;
}

.task-due-date,
.task-priority {
  display: flex;
  align-items: center;
  gap: 4px;
}

.task-actions {
  flex-shrink: 0;
}

.empty-tasks {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.empty-content {
  text-align: center;
}

.empty-content h3 {
  font-size: 18px;
  color: #374151;
  margin: 16px 0 8px 0;
}

.empty-content p {
  color: #6b7280;
  margin: 0;
}

.modal-footer,
.drawer-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.task-detail {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.detail-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-label {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .todos-main {
    grid-template-columns: 240px 1fr;
  }
}

@media (max-width: 768px) {
  .todos-page {
    padding: 16px;
  }
  
  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .todos-main {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .lists-sidebar {
    order: 2;
    max-height: 300px;
  }
  
  .todos-content {
    order: 1;
    padding: 16px;
  }
  
  .content-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .add-task-input {
    flex-direction: column;
  }
}
</style>